<template>
  <div class="unit-box">
    <span id="unit-box-scroll"></span>
    <div class="unit-exbit-null" v-if="total === 0">
      <t-image
        v-if="store.childModel.value"
        fit="cover"
        position="center"
        class="exhibits-item-img t-image--fit-contain t-image--position-center"
        :src="$filters.getLinkUrl(store.childModel.value, '?imageView2/1/w/1180/h/400/format/webp')"
        alt=""
      >
        <template #error>
          <imageNull />
        </template>
      </t-image>
      <div class="unit-exbit-null-remarks" v-if="store.childModel.value">
        <Scrollbar :remarks="remarks"> </Scrollbar>
      </div>
      <div class="unit-exbit-null-remarks2" v-else>
        <Scrollbar :remarks="remarks" :type="2"> </Scrollbar>
      </div>
      <textMax2
        :data="store.childModel.remarks"
        v-if="store.childModel.remarks"
        :moduleId="store.childModel.id"
        :imgBackground="colorList5[store.styleInfo.colorType - 1].auxiliaryColor"
        :exhibitBackground="colorList5[store.styleInfo.colorType - 1].shmentColor"
        @emitExhibits="emitExhibits"
      />
      <div :class="'bgc-box' + store.styleInfo.colorType"></div>
    </div>
    <div class="unit-exbit" v-else>
      <div class="unit-exbit-title-box">
        <div class="unit-exbit-title-box-left">
          <textMax
            v-if="store.childModel.remarks"
            :title="store.childModel.text"
            :color="colorList5[store.styleInfo.colorType - 1].fontColor"
            :data="store.childModel.remarks"
            :modelData="remarks"
            :maxLen="store.childModel.value ? 7 : 3"
          />
        </div>
        <img
          v-if="store.childModel.value"
          class="unit-exbit-title-box-right t-image--fit-cover t-image--position-center"
          :src="urls + store.childModel.value + '?imageView2/1/w/580/h/326/format/webp'"
          alt=""
        />
      </div>
      <auxiliarys
        :moduleId="store.childModel.id"
        :imgBackground="colorList5[store.styleInfo.colorType - 1].auxiliaryColor"
        :exhibitBackground="colorList5[store.styleInfo.colorType - 1].shmentColor"
        @emitExhibits="emitExhibits"
      />
      <div class="exhibit-list" v-if="list.length > 0">
        <t-row :gutter="20">
          <t-col v-for="item in list" :key="item.id">
            <div class="item-style">
              <childInfo :info="item" @click="pathInfo(item.id)" />
            </div>
          </t-col>
        </t-row>
        <!-- <div class="exhibit-list-item1">
          <t-image
            v-if="list[0].coverUrl"
            @click="pathInfo(list[0].id)"
            fit="cover"
            position="center"
            class="exhibit-list-item1-left t-image--fit-contain t-image--position-center"
            :src="$filters.getLinkUrl(list[0].coverUrl, '?imageView2/1/w/710/h/472/format/webp')"
            alt=""
          >
            <template #error>
              <imageNull />
            </template>
          </t-image>
          <div class="exhibit-list-item1-right" :class="'titlebgc' + store.styleInfo.colorType">
            <p
              :style="{
                fontFamily: store.styleInfo.fontFamily,
                color: '#333',
              }"
              class="exhibit-list-item1-right-title"
            >
              {{ list[0].name }}
            </p>
            <p
              :style="{
                fontFamily: store.styleInfo.fontFamily,
                color: '#333',
              }"
              class="exhibit-list-item1-right-text"
            >
              {{ exbitMarsk ? exbitMarsk : '暂无详情' }}
            </p>
          </div>
        </div> -->
        <!-- <div class="exhibit-list-item2" v-if="list.length >= 2">
          <div class="exhibit-list-item2-item" v-for="item in 2" :key="item" @click="pathInfo(list[item].id)">
            <t-image
              fit="cover"
              position="center"
              class="exhibit-list-item2-img t-image--fit-contain t-image--position-center"
              :src="$filters.getLinkUrl(list[item].coverUrl, '?imageView2/1/w/580/h/386/format/webp')"
              alt=""
            >
              <template #error>
                <imageNull />
              </template>
            </t-image>
            <div
              class="btm-box"
              :style="{
                background: colorList5[store.styleInfo.colorType - 1].themeColor,
              }"
            >
              <span :style="{ fontFamily: store.styleInfo.fontFamily }">{{ list[item].name }}</span>
            </div>
          </div>
        </div> -->
        <!-- <div class="item3-box">
          <div class="item3-box-child1">
            <childInfo :info="list[3]" v-if="list.length > 3" @click="pathInfo(list[3].id)" />
            <childInfo :info="list[7]" v-if="list.length > 7" @click="pathInfo(list[7].id)" />
          </div>
          <div class="item3-box-child1">
            <childInfo :info="list[4]" v-if="list.length > 4" @click="pathInfo(list[4].id)" />
            <childInfo :info="list[8]" v-if="list.length > 8" @click="pathInfo(list[8].id)" />
          </div>
          <div class="item3-box-child1">
            <childInfo :info="list[5]" :type="2" v-if="list.length > 5" @click="pathInfo(list[5].id)" />
          </div>
          <div class="item3-box-child1">
            <childInfo :info="list[6]" v-if="list.length > 6" @click="pathInfo(list[6].id)" />
            <childInfo :info="list[9]" v-if="list.length > 9" @click="pathInfo(list[9].id)" />
          </div>
        </div> -->
        <!-- <div class="item3-box">
          <div class="item3-box-child1">
            <childInfo :info="list[10]" v-if="list.length > 10" @click="pathInfo(list[10].id)" />
            <childInfo :info="list[14]" v-if="list.length > 14" @click="pathInfo(list[14].id)" />
          </div>
          <div class="item3-box-child1">
            <childInfo :info="list[11]" v-if="list.length > 11" @click="pathInfo(list[11].id)" />
            <childInfo :info="list[15]" v-if="list.length > 15" @click="pathInfo(list[15].id)" />
          </div>
          <div class="item3-box-child1">
            <childInfo :info="list[12]" :type="2" v-if="list.length > 12" @click="pathInfo(list[12].id)" />
          </div>
          <div class="item3-box-child1">
            <childInfo :info="list[13]" v-if="list.length > 13" @click="pathInfo(list[13].id)" />
            <childInfo :info="list[16]" v-if="list.length > 16" @click="pathInfo(list[16].id)" />
          </div>
        </div> -->
      </div>
      <div class="paginationPage-box">
        <paginationPage
          v-if="total > 12"
          @change="change"
          :current="parmas.pageNo"
          :pageSize="parmas.pageSize"
          :total="total > 0 ? total : 1"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import Scrollbar from './hwScrollSolid.vue';
import paginationPage from '../../components/paginationPage.vue';
import childInfo from './childInfo.vue';
import imageNull from '@/components/imageNull/index.vue';
import textMax from '../../components/textMax.vue';
import textMax2 from '../../components/textMax2.vue';
import { getTextHtml, filterHTML } from '@/utils/minxin';
import { exhibitShowpiece } from '@/api/templates/templates';
import { colorList5 } from '../../../data';
import titles from '../../components/title.vue';
import { urls } from '@/utils/request/upload';
import { ref, reactive, computed, watch, onMounted, nextTick } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { useProjectStore } from '@/store';
import { moduleShowpieces } from '@/api/exhibit/exhibit';
import { storeToRefs } from 'pinia';
import { useRouter, useRoute } from 'vue-router';
import { pathList, pathListLoop } from '../../index';
import auxiliarys from './auxiliarys/index.vue';
const router = useRouter();
const route = useRoute();
const store = useProjectStore();
const { childModel } = storeToRefs(store);
const total = ref(0);
const remarks = ref('');
const exbitMarsk = ref('');
const loading = ref(false);
const list = ref([]);
const parmas = reactive({
  pageSize: 12,
  pageNo: 1,
  id: 0,
  value: '',
});
remarks.value = getTextHtml(store.childModel.remarks);

const pathInfo = (id: number) => {
  router.push({
    name: route.meta.loopType ? pathListLoop[7] : pathList[7],
    query: {
      showpieceid: id,
      moduleId: parmas.id,
    },
  });
  setTimeout(() => {
    const ele = document.getElementById('timeAxis-child-box-id'); // 获取元素
    const top = ele.offsetTop - 140; // 获取元素距离文档顶部的距离
    window.scrollTo({
      top: top,
      behavior: 'smooth', // 设置滚动的动画效果
    });
  }, 100);
};
const emitExhibits = (moduleId: number, id: number) => {
  router.push({
    name: route.meta.loopType ? pathListLoop[7] : pathList[7],
    query: {
      showpieceid: id,
      moduleId: moduleId,
    },
  });
  setTimeout(() => {
    const ele = document.getElementById('timeAxis-child-box-id'); // 获取元素
    const top = ele.offsetTop - 140; // 获取元素距离文档顶部的距离
    window.scrollTo({
      top: top,
      behavior: 'smooth', // 设置滚动的动画效果
    });
  }, 100);
};
const initList = async () => {
  try {
    loading.value = true;
    parmas.id = store.childModel.id;
    let res = await moduleShowpieces(localStorage.getItem('projectId'), parmas);

    list.value = res.data.data;
    total.value = res.data.total;
    // console.log(total.value);
    if (res.data.data.length > 0) {
      init(res.data.data[0].id);
    }
    loading.value = false;
  } catch {
    loading.value = false;
  }
};
const init = async (id: number) => {
  try {
    let { data } = await exhibitShowpiece(Number(store.childModel.id), id);
    exbitMarsk.value = data.description ? filterHTML(data.description) : '';
    // console.log(data);
  } catch (err) {
    console.log(err);
  }
};
initList();
const change = (e: any) => {
  // console.log(e);
  parmas.pageNo = e.page;
  initList();
};
watch(
  childModel,
  () => {
    remarks.value = getTextHtml(store.childModel.remarks);
    initList();
  },
  { deep: true },
);
</script>

<style lang="less" scoped>
@import '../../index.less';
.unit-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  // min-width: 1440px;
  padding-bottom: 0px;
}
.unit-exbit-title-box {
  display: flex;
  width: 1180px;
  margin: 0 auto;
}
.unit-exbit-title-box-left {
  display: flex;
  align-items: center;
  flex: 1;
}
.unit-exbit-title-box-right {
  width: 580px;
  height: 326px;
  margin-left: 50px;
}
.unit-exbit-null {
  width: 1180px;
  margin: 0 auto;
  position: relative;
  background: #cbb995;
}
.bgc-box1 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  background: url('https://static.jiyi.show/template/template5/textBgc1.png');
}
.bgc-box2 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  background: url('https://static.jiyi.show/template/template5/textBgc2.png');
}
.bgc-box3 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  background: url('https://static.jiyi.show/template/template5/textBgc3.png');
}
.unit-exbit-null-remarks {
  position: relative;
  z-index: 30;
  width: 100%;
  padding: 50px 80px;
}
.unit-exbit-null-remarks2 {
  position: relative;
  z-index: 29;
  width: 100%;
  padding: 50px 80px;
  max-height: 700px;
}
// .unit-exbit-null-remarks-info {
//   display: flex;
//   flex-direction: column;
//   // min-height: 240px;
//   // max-height: 610px;
//   // overflow-y: auto;
//   span {
//     text-indent: 2em;
//     font-size: 17px;
//     color: #333333;
//     line-height: 30px;
//   }
// }
.exhibits-item-img {
  position: relative;
  z-index: 20;
  width: 1180px;
  height: 400px;
}
//
.unit-exbit-null-remarks {
}
.unit-exbit-null-remarks-info {
  height: 40px;
  scrollbar-thumb {
    height: 40px;
  }
}
.exhibit-list {
  display: flex;
  width: 1180px;
  margin: 0 auto;
  margin-top: 80px;
  // padding-bottom: 100px;
}
.exhibit-list-item1 {
  display: flex;
  width: 1440px;
  height: 472px;
  margin: auto;
}
.exhibit-list-item1-left {
  width: 710px;
  height: 472px;
}
.exhibit-list-item1-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 1;
  height: 472px;
  overflow: hidden;
  .exhibit-list-item1-right-title {
    font-size: 18px;
    color: #333333;
    line-height: 30px;
    width: 544px;
    margin-top: 120px;
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 溢出隐藏 */
    text-overflow: ellipsis; /* 添加省略号 */
  }
  .exhibit-list-item1-right-text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 544px;
    height: 124px;
    margin-top: 50px;
    font-size: 17px;
    color: #333333;
    line-height: 30px;
  }
}
.btm-box {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  span {
    font-size: 18px;
    font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;
    color: #ffffff;
    line-height: 28px;
    color: #fff;
    text-align: center;
    width: 100%;
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 溢出隐藏 */
    text-overflow: ellipsis; /* 添加省略号 */
  }
}
.exhibit-list-item2 {
  display: flex;
  justify-content: space-between;
  width: 1180px;
  margin: 0 auto;
  margin-top: 80px;
}
.exhibit-list-item2-item {
  display: flex;
  flex-direction: column;
  height: 436px;
  width: 580px;
  cursor: pointer;
}
.exhibit-list-item2-img {
  height: 386px;
  width: 100%;
}
.item3-box-child1 {
  display: flex;
  flex-direction: column;
}
.item3-box {
  display: flex;
  width: 1180px;
  margin: 0 auto;
  justify-content: space-between;
}
.item3-box-child1 {
  width: 280px;
  display: flex;
  flex-direction: column;
}
.paginationPage-box {
  width: 100%;
  margin: 80px 0;
  margin-bottom: 80px !important;
}
.unit-exbit {
  width: 100%;
}
.item-style {
  width: 280px;
}
.t-col {
  margin-bottom: 0px;
}
.t-row {
  margin-top: 0px;
}
</style>
